<html>
<head>
  <style>
 
    div.marquee-v 
    {
      border:1dip solid black;
      background: gold;
      width:max-intrinsic;
      height:max-content;
      overflow:hidden;
      flow:vertical;
      -marquee: vertical;
      -marquee-direction: forward;
      -marquee-style: scroll;
    }

    
    button:checked + div.marquee-v
    {
      height:100dip;
      behavior: marquee;
    }
    
  
  </style>  
</head>
<body>
    <button|checkbox>Animate</button>   
    <div.marquee-v>
      <p>A</p>
      <p>Ab</p>
      <p>Abr</p>
      <p>Abra</p>
      <p>Abrak</p>
      <p>Abraka</p>
      <p>Abrakad</p>
      <p>Abrakada</p>
      <p>Abrakadab</p>
      <p>Abrakadabr</p>
      <p>Abrakadabra</p>
    </div>
  </div>  


</body>
</html>
